<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/admin/css/other/department.css"/>
    <link rel="stylesheet" href="/admin/css/other/console2.css"/>
    <style>
        .pear-card-title {
            display: flex;
            align-items: center;
            justify-content: center
        }

        .pear-card {
            display: flex;
            align-items: center;
            justify-content: center
        }
    </style>

</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <!--        <div class="layui-row layui-col-space10">-->
        <!--            <div class="layui-col-md12">-->
        <div class="layui-card">
            <div class="layui-card-header">
                快捷菜单
            </div>
            <div class="layui-card-body">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home1" data-title="密集箱控制" data-url="/dense/box/index">
                            <!--                            <i class="layui-icon layui-icon-home"></i>-->
                            <img src="/img/导入.png" alt="" style="width: 32px">
                        </div>
                        <span class="pear-card-title">导入</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home2" data-title="增加" data-url="">
                            <!--                            <i class="layui-icon layui-icon-camera"></i>-->
                            <img src="/img/增加.png" alt="" style="width: 33px">
                        </div>
                        <span class="pear-card-title">增加</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home2" data-title="修改" data-url="">
                            <img src="/img/修改 (1).png" alt="" style="width: 27px">

                        </div>
                        <span class="pear-card-title">修改</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home3" data-title="删除" data-url="">
                            <img src="/img/删除.png" alt="" style="height: 30px;">
                        </div>
                        <span class="pear-card-title">删除</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home4" data-title="位置" data-url="">
                            <img src="/img/位置.png" alt="" style="height: 30px;">
                        </div>
                        <span class="pear-card-title">位置</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home5" data-title="借阅" data-url="">
                            <img src="/img/免费借阅.png" alt="" style="height: 30px;">
                        </div>
                        <span class="pear-card-title">借阅</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home6" data-title="归还" data-url="">
                            <img src="/img/归还.png" alt="" style="height: 30px;">
                        </div>
                        <span class="pear-card-title">归还</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home7" data-title="日志" data-url="">
                            <img src="/img/日志.png" alt="" style="height: 30px;">
                        </div>
                        <span class="pear-card-title">日志</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home7" data-title="查询" data-url="">
                            <img src="/img/查询.png" alt="" style="height: 30px;">
                        </div>
                        <span class="pear-card-title">查询</span>
                    </div>
                </div>
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home7" data-title="名称查询" data-url="">
                            <img src="/img/名称查询.png" alt="" style="height: 30px;">
                        </div>
                        <span class="pear-card-title">名称查询</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home7" data-title="条码查找" data-url="">
                            <img src="/img/单号条码查询.png" alt="" style="height: 32px;">
                        </div>
                        <span class="pear-card-title">条码查找</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home7" data-title="打开箱列" data-url="">
                            <img src="/img/open.png" alt="" style="height: 30px;">
                        </div>
                        <span class="pear-card-title">打开箱列</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home7" data-title="关闭箱列" data-url="">
                            <img src="/img/关闭小.png" alt="" style="height: 29px;">
                        </div>
                        <span class="pear-card-title">关闭箱列</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home7" data-title="打印条码" data-url="">
                            <img src="/img/条码打印.png" alt="" style="height: 30px;">
                        </div>
                        <span class="pear-card-title">打印条码</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home7" data-title="打印" data-url="">
                            <img src="/img/打印.png" alt="" style="height: 30px;">
                        </div>
                        <span class="pear-card-title">打印</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home7" data-title="打印" data-url="">
                            <img src="/img/卡片打印.png" alt="" style="height: 28px;">
                        </div>
                        <span class="pear-card-title">卡片打印</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home7" data-title="批量入位" data-url="">
                            <img src="/img/批量添加.png" alt="" style="height: 30px;">
                        </div>
                        <span class="pear-card-title">批量入位</span>
                    </div>
                </div>
            </div>
            <!--                </div>-->
            <!--            </div>-->
        </div>
    </div>
</div>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md2">
        <div class="layui-card">
            <!--            <div class="layui-card-header">选项卡</div>-->
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">在库</li>
                        <li>出库</li>
                    </ul>
                    <!-- overflow-x: scroll;-->
                    <!-- overflow-y: hidden;-->
<!--               height: calc(76.5vh);     -->
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div id="organizationTreeContent" style="overflow: auto;min-height: calc(100vh - 500px);">
                                <ul id="organizationTree" class="dtree organizationTree" data-id="9527"></ul>
                            </div>
                        </div>
                        <div class="layui-tab-item">123213123123123123</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
                        <div class="layui-card-header">档案信息</div>
            <div class="layui-card-body">
                <span style="display: flex;justify-content: center;align-items: center; ">共有档案数: 751份</span><br>
                <span style="display: flex;justify-content: center;align-items: center; ">借阅份数: 0份</span><br>
                <span style="display: flex;justify-content: center;align-items: center; ">库存档案数: 751份</span>
            </div>
        </div>
    </div>
    <div class="layui-col-md10">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="realName" placeholder="" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                            <button type="reset" class="pear-btn pear-btn-md">
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="organization-table" lay-filter="organization-table"></table>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="realName" placeholder="" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                            <button type="reset" class="pear-btn pear-btn-md">
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="top-table" lay-filter="top-table"></table>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="organization-toolbar">
    <button class="pear-btn pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        导入
    </button>
    <button class="pear-btn pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
    <button class="pear-btn pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        打印
    </button>
</script>
<script type="text/html" id="organization-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
            class="layui-icon layui-icon-delete"></i></button>
</script>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'dtree'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;

        $("body").on("click", "[data-url]", function () {
            parent.layui.tab.addTabOnlyByElem("content", {
                id: $(this).attr("data-id"),
                title: $(this).attr("data-title"),
                url: $(this).attr("data-url"),
                close: true
            })
        })

        let MODULE_PATH = "operate/";

        var DTree = dtree.render({
            elem: "#organizationTree",
            //data: data,
            initLevel: "2", //默认展开层级为1
            line: true, // 有线树
            ficon: ["1", "-1"], // 设定一级图标样式。0表示方形加减图标，8表示小圆点图标
            icon: ["0", "2"], // 设定二级图标样式。0表示文件夹图标，5表示叶子图标
            method: 'get',
            url: "/admin/data/organizationtree.json"
        });

        // 绑定节点点击事件
        dtree.on("node(organizationTree)", function (obj) {
            if (!obj.param.leaf) {
                var $div = obj.dom;
                DTree.clickSpread($div); //调用内置函数展开节点
            } else {
                layer.msg("叶子节点就不展开了,刷新右侧列表");
                table.reload("organization-table");
            }
        });

        let cols = [
            [
                {title: '类别代码', field: 'name', align: 'left'},
                {title: '档案类别名称', field: 'userCount', align: 'center'},
                {title: '最小值', field: 'leader', align: 'center'},
                {title: '最大值', field: 'leader', align: 'center'},
                {title: '是否提醒', field: 'leader', align: 'center'},
                {title: '操作', toolbar: '#organization-bar', align: 'center', width: 130}
            ]
        ];
        table.render({
            elem: '#organization-table',
            url: '/admin/data/organization.json',
            // height: 'full-150',
            page: true,
            cols: cols,
            skin: 'line',
            // toolbar: '#organization-toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports'],
        });
        table.on('tool(organization-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        table.on('toolbar(organization-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });
        window.add = function () {
            layer.open({
                type: 2,
                title: '新增',
                shade: 0.1,
                area: ['500px', '400px'],
                content: MODULE_PATH + 'add.html'
            });
        }

        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: ['500px', '400px'],
                content: MODULE_PATH + 'edit.html'
            });
        }

        window.remove = function (obj) {
            layer.confirm('确定要删除该用户', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "remove/" + obj.data['organizationId'],
                    dataType: 'json',
                    type: 'delete',
                    success: function (result) {
                        layer.close(loading);
                        if (result.success) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.batchRemove = function (obj) {
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("未选中数据", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }
            let ids = "";
            for (let i = 0; i < data.length; i++) {
                ids += data[i].organizationId + ",";
            }
            ids = ids.substr(0, ids.length - 1);
            layer.confirm('确定要删除这些用户', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "batchRemove/" + ids,
                    dataType: 'json',
                    type: 'delete',
                    success: function (result) {
                        layer.close(loading);
                        if (result.success) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                table.reload('organization-table');
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.refresh = function (param) {
            table.reload('organization-table');
        }

        form.on('submit(organization-table)', function(data) {
            table.reload('user-table', {
                where: data.field
            })
            return false;
        });

        // 下面表格
        table.render({
            elem: '#top-table',
            url: '/admin/data/organization.json',
            // height: 'full-150',
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#organization-toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports'],
        });

    })
</script>
</body>
</html>
